<template>
    <div class="index-box" v-loading="loading">

      <div class="backBox" style="margin-bottom: 17px;">
            <span class="back" @click="back"><i class="el-icon-back"></i>返回</span>
        </div>
      <el-tabs type="border-card">
      	<el-tab-pane label="基础信息">
      		<el-descriptions :column="2" border labelClassName="descriptions-label">
      			<el-descriptions-item label="用户名">
      				{{ customer.userCode }}
      			</el-descriptions-item>

      			<el-descriptions-item label="微信号">
      				{{ customer.xcxOpenId }}
      			</el-descriptions-item>

      			<el-descriptions-item label="真实姓名">
      				{{customer.fullName}}
      			</el-descriptions-item>

      			<el-descriptions-item label="身份证号">
      				{{ customer.idcardNumber}}
      			</el-descriptions-item>

            <el-descriptions-item label="手机号码">
            	{{ customer.telephone }}
            </el-descriptions-item>
            <el-descriptions-item label="用户邮箱">
              {{customer.email}}
            </el-descriptions-item>
            <el-descriptions-item label="性别">
            	 {{ customer.gender=='0'?'未知':(customer.gender=='1'?'男':'女') }}
            </el-descriptions-item>
            <el-descriptions-item label="实名状态">
              {{ customer.realName=='1'?"已实名" : "未实名" }}
            </el-descriptions-item>
            <el-descriptions-item label="微信昵称">
            	{{ customer.xcxOpenId }}
            </el-descriptions-item>
            <el-descriptions-item label="微信ID">
            	{{ customer.xcxOpenId }}
            </el-descriptions-item>
            <el-descriptions-item label="会员等级">
               	{{ customer.leveName }}
            </el-descriptions-item>
            <el-descriptions-item label="标签">
            	 <el-tag v-for="(tag,index) in tagList"  :style="{borderColor:tag.color,backgroundColor:tag.color}"  :key="tag.id" class="myTag">{{tag.name}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="注册时间">
            	{{ parseTime(customer.insertDate) }}
            </el-descriptions-item>
            <el-descriptions-item label="加盟编号(日期)">
            	{{ customer.unionCode }}
            </el-descriptions-item>
            <el-descriptions-item label="开户银行">
                {{ customer.bankName }}
            </el-descriptions-item>
            <el-descriptions-item label="开户银行卡号">
            	{{ customer.idcardNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="推荐人手机号">
            	{{ customer.parentTelephone}}
            </el-descriptions-item>
      		</el-descriptions>

          <div class="d-flex" style="margin-top:10px">
            <el-card class="margin-top" header="身份证正面照" style="margin-right:10px">
                <el-image style="width: 150px; height: 90px;cursor: pointer;" v-image-preview="imgHost+customer.idcardBackPic"
                  :src="imgHost+customer.idcardFrontPic"
                  >
                </el-image>
            </el-card>
            <el-card class="margin-top" header="身份证背面照">
              <el-image style="width: 150px; height: 90px;cursor: pointer;"
              v-image-preview="imgHost+customer.idcardBackPic"
                :src="imgHost+customer.idcardBackPic">
                </el-image>
            </el-card>
          </div>

      	</el-tab-pane>

      	<el-tab-pane label="订单信息">
      		<el-descriptions :column="2" border labelClassName="descriptions-label" class="order-box">
      			<!-- <el-descriptions-item :label="item.msg" v-for="item in orderInfo">
      				{{item.count}}
      			</el-descriptions-item> -->


            <el-descriptions-item label="订单数量">
            	{{ orderInfo.orderNumber }}
            </el-descriptions-item>

      			<el-descriptions-item label="成功交易订单数">
      				{{ orderInfo.successNumber }}
      			</el-descriptions-item>

      			<el-descriptions-item label="首次下单日期">
      				{{ parseTime(orderInfo.createTime) }}
      			</el-descriptions-item>
            <el-descriptions-item label="好礼成交订单数">
            	{{ orderInfo.HLsuccessNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="评价次数">
            	{{ orderInfo.evaluateNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="云仓成交订单数">
            	{{ orderInfo.YCsuccessNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="退款次数">
            	{{ orderInfo.refundNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="好店成交订单数">
            	{{ orderInfo.HDsuccessNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="扫码付款总金额(元)">
            	{{ orderInfo.SMPayTotal }}
            </el-descriptions-item>
            <el-descriptions-item label="扫码成交订单数">
            	{{ orderInfo.SMsuccessNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="消费券总金额(元)">
            	{{ orderInfo.couponTotal }}
            </el-descriptions-item>
            <el-descriptions-item label="消费券可用金额(元)">
            	{{ orderInfo.couponUsableTotal }}
            </el-descriptions-item>
            <el-descriptions-item label="退款总金额(元)">
            	{{ orderInfo.refundTotal }}
            </el-descriptions-item>
            <el-descriptions-item label="订单实付总金额(元)">
            	{{ orderInfo.SMPayTotal }}
            </el-descriptions-item>

      		</el-descriptions>
      	</el-tab-pane>

      	<el-tab-pane label="推荐信息">
          <div class="d-flex">
              <el-descriptions :column="2" border labelClassName="descriptions-label" class="order-box" style="flex:1">
                <el-descriptions-item :label="item.msg" v-for="item in recommendedInfo">
                	{{item.count}}
                </el-descriptions-item>
              	<el-descriptions-item label="推荐总人数">
              		{{ formItem.order_data.order_total_number }}
              	</el-descriptions-item>

              	<el-descriptions-item label="成功加盟人数">
              		{{ formItem.order_data.order_complete_number }}
              	</el-descriptions-item>

              	<el-descriptions-item label="收益总额(元)">
              		{{ formItem.order_data.order_first_date }}
              	</el-descriptions-item>

              	<el-descriptions-item label="收益可用额(元)">
              		{{ formItem.order_data.hl_complete_num }}
              	</el-descriptions-item>

              	<el-descriptions-item label="提现总额(元)">
              		{{ formItem.order_data.yc_complete_num }}
              	</el-descriptions-item>

              	<el-descriptions-item label="可提现额(元)">
              		{{ formItem.order_data.sm_complete_num }}
              	</el-descriptions-item>

                <el-descriptions-item label="提现次数">
                	{{ formItem.order_data.sm_complete_num }}
                </el-descriptions-item>

              </el-descriptions>
              <div class="QRCodeBox">
                  <div class="title">推广二维码</div>
                  <div class="qrcode" ref="qrCodeUrl"></div>
              </div>
          </div>


      	</el-tab-pane>
      </el-tabs>

     <!-- <el-button type="warning" plain size="small" @click="back" class="button-back" style="margin-top: 10px;">返 回</el-button> -->
    </div>
</template>

<script>
  import QRCode from 'qrcodejs2';
  import common from '@/api/api'
  import {
    getCustomerDetail
  } from '@/api/getData'
	export default {
		name: 'customer_customer_detail',
		data() {
			return {
				page_title: "",
				permission: {},
        customerId:'',
				levels: {1:"普通会员", 2:"黄金会员",3:"白金会员", 4:"钻石会员"},

				/*		加载中控制		*/
				submitLoading: false,
        loading:false,
				/*		加载中控制		*/
        imgHost:"",
        customer:{},
        orderInfo:{},
        recommendedInfo:[],
        tagList:[],
				/*		表单数据		*/
				formItem: {
					id: "",
					code: "",
					nickname: "",
					telephone: "",
					email: "",
					gender: "1",
					fullname: "",
					idcard_number: "",
					level: "",
					bank_name: "",
					bank_number: "",
					status: "",
					order_data: {}
				},
				/*		表单数据		*/

			}
		},
		mounted() {
      this.customerId = this.$route.query.customerId;
			this.dataInfo();
      //this.creatQrCode();
		},
		activated() {
			//	如果第二次进入修改的数据不同，则重新获取数据
			if (this.$route.customerId != this.customerId) {
				this.customerId = this.$route.query.customerId;
				this.dataInfo();
			}
		},
		methods: {
      async dataInfo() {
        try {
          this.loading = true;
          const result = await getCustomerDetail({customerId:this.customerId});
          if (result.code == 200) {
            this.customer = result.data.customer;
            if(this.customer.idcardFrontPic.indexOf('http')=='-1'){
              this.imgHost = common.imghost;
            }
            this.orderInfo = result.data.orderInfo;
            this.recommendedInfo= result.data.recommendedInfo;
            this.tagList = result.data.tagList
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      creatQrCode() {
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: 'xxxx', // 需要转换为二维码的内容
              width: 200,
              height: 200,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
          })
      },

			/*		退出当前界面		*/
			back() {
				this.$router.go(-1);
			},
			save() {
				var formItem = this.$refs.formItem

				formItem.validate((valid) => {
					if (valid) {
						this.submitLoading = true

						this.$axios({
							method: 'post',
							url: 'customer_customer/update',
							data: this.formItem
						}).then ((res) => {
							this.submitLoading = false

							if (res.success) {
								this.$message.success('操作成功，数据已成功保存')

								this.back()
							} else {
								this.$message.error(res.error_text)
							}
						})
					}
				})
			},

			resetPassword() {
				this.$confirm('此操作将重置会员登入密码为 888888 , 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios({
						method: 'post',
						url: 'customer_customer/resetpaw',
						data: {
							id: this.formItem.id
						}
					}).then ((res) => {
						if (res.success) {
							this.$message.success('重置密码成功')

						} else {
							this.$message.error(res.error_text)
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});


			},
		}
	}
</script>

<style lang="scss" scoped>
    .index-box{
      height: 100%;
      overflow-y: auto;
    }
    .order-box /deep/ .el-descriptions-item__content{
      color:red;
      font-weight: bold;
    }
    .QRCodeBox{
      margin-left:40px;
      .title{font-size: 20px;margin-bottom: 10px;text-align: center;}
    }
    .myTag{
      margin-right:5px;
      color:#fff;
      padding: 4px 8px;
      font-size: 12px;
      line-height: 12px;
      color: #fff;
      border-radius: 2px;
      margin-right: 4px;
      width: fit-content;
      height:auto;
    }
</style>
